<template>
	<div class="container-wrap">
		<div class="container login-container">
			<div class="title">{{ $t('user_login') }}</div>
			<div class="darkbannerwrap"></div>

			<div>
				<div class="form-group">
					<input type="text" name="username" v-model="name" :placeholder="$t('username')">
				</div>

				<div class="form-group">
					<input type="password" name="password" v-model="passwd" :placeholder="$t('password')">
				</div>

				<div class="form-verification-group">
					<input id="vcode" type="text" name="vcode" v-model="vcode" :placeholder="$t('verification_code')"
						@keyup.enter="login">

					<img id="vcode-img" :src="vcodeImgUrl" @click="refreshVcode">
				</div>


				<div class="func-group">
					<RouterLink class="ib_left" to="/register">
						{{ $t('register_account') }}
					</RouterLink>

					<RouterLink class="ib_right" to="/forgot_password">
						{{ $t('forgot_password') }}
					</RouterLink>
				</div>


				<button class="submit" @click="login">{{ $t('login') }}</button>

				<span v-show="tips" class="tips">{{ tips }}</span>
			</div>
		</div>
	</div>
</template>

<script type="module">
import { UserService, Router } from '@/common/common.object'
import { store } from '@/common/store';

// const TARGET = getParam("target", "/");
const TARGET = "/";
const timestampGetter = () => (new Date()).getTime();
// 验证码有效时间: 5分钟
const INTERVAL = 5 * 60 * 1000;


export default {
	data() {
		return {
			timestamp: timestampGetter(),

			name: "Test",
			passwd: "123456",

			// name: "Timor",
			// passwd: "olleh-112211!",
			vcode: null,

			tips: null,
		};
	},
	created() {
		setInterval(() => this.refreshVcode(), INTERVAL);
	},
	computed: {
		vcodeImgUrl() {
			return Router.api.user.loginCaptcha(this.timestamp);
		}
	},
	methods: {
		login() {
			UserService.login(this.name, this.passwd, this.vcode)
				.then(() => {
					store.onLogin();

					this.$toPage(TARGET);
				}).catch(error => {
					console.log('error: ', error);
					this.tips = error;
				});

			return false;
		},
		refreshVcode() {
			this.timestamp = timestampGetter();
		}
	}
};
</script>


<style scoped>
@import '@/assets/common_login_register_forgot.css';

.container {
	min-height: 420px;
}


.form-verification-group {
	margin-bottom: 8px;
}



.func-group {
	margin-bottom: 15px;
	height: 21px;
	width: 100%;
}

.func-group>a {
	display: inline-block;
	padding: 0 8px;

	color: dodgerblue;
}

.ib_left {
	float: left;
}

.ib_right {
	float: right;
}

</style>